import React from 'react';
import {connect} from 'dva';
import withRouter from 'umi/withRouter';
import {Layout} from '../../../components';
import {
    Form,
    Row,
    Col,
    Input,
    InputNumber,
    Select,
    Icon,
    DatePicker,
    Button,
    message
} from 'antd';

const { ListItems, Tab, ModalCreateForm} = Layout;
const FormItem = Form.Item;
const {MonthPicker, RangePicker} = DatePicker;

class HorizontalLoginForm extends React.Component {
    handleSearch = (e) => {
        e.preventDefault();
        this
            .props
            .form
            .validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                }
            });
    }
    renderSimpleForm() {
        const {form: {
                getFieldDecorator
            }} = this.props;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row
                    gutter={{
                    md: 8,
                    lg: 24,
                    xl: 48
                }}>
                    <Col md={8} sm={24}>
                        <FormItem label="订单编号">
                            {getFieldDecorator('order')(<Input/>)}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="下单日期">
                            {getFieldDecorator('date')(<RangePicker/>)}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <span className="submitButtons">
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </span>
                    </Col>
                </Row>
            </Form>
        );
    }
    render() {
        return (
            <div className="searchForm">
                {this.renderSimpleForm()}
            </div>
        );
    }
}

const WrappedHorizontalLoginForm = Form.create()(HorizontalLoginForm);

function OrderList({children, buyOrderList, dispatch, location, history}) {
    const {list} = buyOrderList
    const listProps = {
        list,
        col:8,
        tableHead: [
            {
                title: '商品',
                key: ['goods'],
                width: '10%'
            }, {
                title: '材质',
                key: ['material'],
                width: '10%'
            }, {
                title: '规格',
                key: ['size'],
                width: '10%'
            }, {
                title: '钢厂',
                key: ['steel'],
                width: '10%'
            }, {
                title: '仓库',
                key: ['store'],
                width: '10%'
            }, {
                title: '单价',
                key: ['price'],
                width: '10%'
            }, {
                title: '件数',
                key: ['num'],
                width: '10%'
            }, {
                title: '单件重',
                key: ['numWeight'],
                width: '10%'
            }, {
                title: '小计件重',
                key: ['sumWeight'],
                width: '10%'
            }, {
                title: '状态',
                key: ['orderStatus'],
                width: '10%'
            }
        ]
    }
    const tabProps = {
        tabContent: [
            {
                title: '全部',
                content: <ListItems {...listProps}/>
            }, {
                title: '待付款',
                content: <ListItems {...listProps}/>
            }, {
                title: '待系统审核',
                content: <ListItems {...listProps}/>
            }, {
                title: '待用户确认',
                content: <ListItems {...listProps}/>
            }, {
                title: '待提货',
                content: <ListItems {...listProps}/>
            }, {
                title: '待收货',
                content: <ListItems {...listProps}/>
            }, {
                title: '已完成',
                content: <ListItems {...listProps}/>
            }, {
                title: '已关闭',
                content: <ListItems {...listProps}/>
            }
        ]
    }
    return (
        <div className="white padding10">
            <div className="clear search">
                <WrappedHorizontalLoginForm/>
            </div>
            <Tab {...tabProps}/>
        </div>
    )
}

export default withRouter(connect(({buyOrderList}) => ({buyOrderList}))(OrderList));
